<template>

<div class="home">
    
    <div class="top">
        <l-topBar></l-topBar>
    </div>
    
    <div class="content">
        <transition name='gradient-position'>
            <router-view></router-view>
        </transition>
    </div>

</div>

</template>

<script lang='ts'>
import topBar from '@/components/ivew_components/top_bar/index.vue'
import { Component, Vue } from 'vue-property-decorator'

@Component({

    components: {
        'l-topBar': topBar
    }
  
})
export default class home extends Vue{

    name:string = 'home'
    text:string = 'text'
    
}


</script>

<style scoped lang='scss'>

.home{
    display: grid;
    grid-template-rows: _rem(48px) auto;
    grid-template-columns: repeat(24 1fr);
    
    height: 100%;
    background: $default_bg;
}


.top{
    grid-row: 1/2;
    grid-column: 1/24;
}
.content{
    position: relative;
    overflow: hidden;
    grid-row: 2/3;
    grid-column: 1/24;
}

</style>
